﻿@{
    ViewData["Title"] = "Captcha";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <!--引用微软的压缩版本-->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    <div>
        <input id="txtCaptcha" type="text" style="width: 200px;" /><br>
        <br>
        <img id="imgCaptcha" style="cursor: pointer;" src="/Home/GetCaptchaImage" alt="验证码" />
        <br>
        <br>
        <button id="btnCaptcha">提交</button>
    </div>
    <script type="text/javascript">
        function getCookie() {
            //获取Cookie值
            var strCookie = document.cookie;
            var arrCookie = strCookie.split("; ");
            for (var i = 0; i < arrCookie.length; i++) {
                var arr = arrCookie[i].split("=");
                if (arr[0] === '@ViewBag.Captcha') return arr[1];
            }
            return "";
        }
        $("#btnCaptcha").click(function () {
            //调用验证码校验方法
            var answer = encodeURI($("#txtCaptcha").val());
            var captcha = encodeURI(getCookie());
            var model = {
                Answer: answer,
                Captcha: captcha
            };
            var json = JSON.stringify(model);
            $.ajax({
                async: true,
                type: "POST",
                url: "/api/CaptchaApi/verifyCaptcha?",
                cache: false,
                timeout: 60 * 60 * 1000,
                contentType: "application/json",
                dataType: "json",
                data: json,
                success: function (result) {
                    alert(JSON.stringify(result));
                }
            });
        });
    </script>
</body>
</html>
